<template>
	<view class="container">
		<z-paging ref="paging" empty-view-img="/static/nodata1.png" :empty-view-img-style="{width:'410rpx',height:'278rpx',marginBottom:'50rpx'}" v-model="dataList" @query="getList"  @onRefresh="onRefresh">
			
			<!-- 自定义下拉刷新view -->
			<view slot="refresher">
				<view class="loadImg">
					<image class="img" src="@/static/refresher_loading.gif" mode="widthFix"></image>
				</view>
			</view>
			<view class="wrap" v-for="(item,index) in list" :key="index" @tap="toUrl(item.link,item.id)">
				<view class="time">
					{{item.created_at}}
				</view>
				<view class="box">
					<view class="flex">
						<image :src="item.send_info.headimg" mode="widthFix" class="icon"></image>
						<view class="h3">
							{{item.send_info.nickname}}
						</view>
					</view>
					<view class="h3" style="margin-top: 30rpx;font-weight: bold;">
						{{item.title}}
					</view>
					<view class="p">
						{{item.content}}
					</view>
				</view>
			</view>
			
		</z-paging>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	import { 
		messages
	} from '@/config/user/api';
	export default {
		data() {
			return {
				loading:true,
				dataList:[],
				list: [],
				listTip: null,
				id:0,
			}
		},
		components: {
		},
		onLoad(o) {
			if(o.id){
				this.id = o.id;
			};
			this.$list.init(this);
		},
		onShow() {
		},
		computed: {
			...mapState({
			    userInfo: 'userInfo',
			})
		},
		methods: {	
			async getList(pageNo,pageSize,onRefresh = false){
				const that = this;
				let paramData = {
					page_no:pageNo,
					send_users: that.id,
				};
				const res = await messages(paramData);
				if (res.code != 1) {
					this.$common.showTip(res.msg, 'none')
					return
				};
				let list = res.data.lists || [];
				if (list.length) {
					list.forEach(el=>{
						el.images = [el.image];
					})
					let setdata = that.$list.normalData(list, that);
					that.list = setdata.list;
					that.$refs.paging.complete(setdata.list);
				} else {
					that.$refs.paging.complete([]);
				};
				
				
			},
			async onRefresh(){
			},
			toUrl(url,id){
				if(url){
					uni.navigateTo({
						url
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/msg_det?id=' + id
					})
				}
			},
			...mapMutations(['setUserInfo','setCityMsg'])
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
	}
	.time{
		padding: 10rpx 0;
		text-align: center;
		font-size: 24rpx;
		color: #aaaaaa;
	}
	.box{
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 35rpx 30rpx;
		.icon{
			width: 56rpx;
			margin-right: 20rpx;
		}
		.h3{
			font-size: 30rpx;
			color: #444444;
		}
		.p{
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #777777;
			line-height: 40rpx;
		}
		.bot{
			margin-top: 30rpx;
			border-top: 1px solid #dddddd;
			height: 88rpx;
			.span{
				font-size: 26rpx;
			}
			.jt{
				width: 12rpx;
			}
		}
	}
</style>
